<template>
	<view class="sticky" :class="is_sticky ? 'fixed':''">
		<slot></slot>
	</view>
</template>

<script setup>
	import {
		ref,
		getCurrentInstance
	} from "vue"
	

	let top = ref(0)
	let is_sticky = ref(false)
	
	const instace = getCurrentInstance();
	const query = uni.createSelectorQuery().in(instace.proxy)
	query.select(".sticky").boundingClientRect(function(data) {
		console.log(data)
		top.value = Number(data.top)
	}).exec();
	
	
	const setTop = (e) => {
		is_sticky.value = top.value < e;
		console.log(is_sticky.value, top.value, e)
	}
	defineExpose({
		setTop
	})
</script>

<style lang="scss" scoped>
	.fixed{
		position: fixed;
		top: 0;
		width: calc(100% - 40rpx);
		padding: 20rpx;
		background: #fff;
	}
	.sticky{
		position: sticky;
		top: 0;
	}
</style>